<template>
  <div>
    <!-- template -->
  <MyTable :arr="list">
    <template v-slot="scope">
    <div class="box">
      序号:  {{ scope.index + 1 }}
    </div>
  </template>
  <!-- price -->
  <template v-slot:price="scope">
     $: {{ scope.price }}
  </template>
  <!-- tags -->
  <template v-slot:tags="scope">
    <span class="tags" v-for="(item,index) in scope.row.tags" :key="index">
      {{ item }}
    </span>
    <input
        class="tag-input form-control"
        style="width: 100px;"
        type="text"
        v-if="scope.row.inputVisible"
        @blur="scope.row.inputVisible = false"
        @keyup.enter="onKeyupEnter(scope.row)"
        v-model="scope.row.inputValue"
        v-focus
        />
        <button
        v-else
        style="display: block;"
        class="btn btn-primary btn-sm add-tag"
        @click="scope.row.inputVisible = !scope.row.inputVisible"
        >+Tag</button>
  </template>
  <!-- 操作 -->
  <template v-slot:options="scope">
     <button @click="delGoods(scope.row.id)" class="btn btn-danger btn-sm">删除</button>
  </template>
  </MyTable>

  </div>
</template>

<script>
import MyTable from './MyTable.vue'
import axios from 'axios'
export default {
  data () {
    return {
      list: [],
      isShowInput: true
    }
  },
  components: {
    MyTable
  },
  created () {
    this.getGoods()
  },

  methods: {
    // 获取商品
    async getGoods () {
      const { data: res } = await axios({
        url: 'https://www.escook.cn/api/goods'
      })
      // console.log(res)
      this.list = res.data
    },
    onKeyupEnter (row) {
      // console.log('点了回车', row.inputValue)
      if (row.inputValue === '') return alert('不能为空')
      row.tags.push(row.inputValue)
      row.inputValue = ''
      row.inputVisible = false
    },
    delGoods (id) {
      // console.log(id)
      const index = this.list.findIndex(item => item.id === id)
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.box {
  border-radius: 15px;
  background-color: #f6f6f6;
  color: black;
  padding-left: 10px;
}
.tags {
  font-size: 14px;
  color: #fff;
  background-color: yellowgreen;
  border-radius: 5px;
  margin: 0 4px;
  padding: 5px 8px;
}
</style>
